<template>
  <el-tabs tab-position="left" style="height: 100%;">
    <el-tab-pane label="系统消息">
      <el-card shadow="always" style="margin-top:;">
        <el-table :data="systemMessage" style="width: 100%; margin-left: 10px; margin-right: 10px;">
          <el-table-column prop="content" label="" width="">
            <template slot-scope="scope">
                <div>
                  <font size="3" color="#000000">{{scope.row.messageContent}}</font><br />
                  <font size="1" color="#565656">{{scope.row.name}} {{scope.row.createTime}}</font><br />
                </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle1"
          :current-page="pageIndex1"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage1"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </el-card>
    </el-tab-pane>


    <el-tab-pane label="用户消息">
      <el-card shadow="always" style="margin-top:;">
        <el-table :data="userMessage" style="width: 100%; margin-left: 10px; margin-right: 10px;">
          <el-table-column prop="content" label="" width="">
            <template slot-scope="scope">
                <div>
                  <font size="3" color="#000000">{{scope.row.messageContent}}</font><br />
                  <font size="1" color="#565656">{{scope.row.name}} {{scope.row.createTime}}</font><br />
                </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle2"
          :current-page="pageIndex2"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage2"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </el-card>
    </el-tab-pane>


    <el-tab-pane label="其他消息">
      <el-card shadow="always" style="margin-top:;">
        <el-table :data="otherMessage" style="width: 100%; margin-left: 10px; margin-right: 10px;">
          <el-table-column prop="content" label="" width="">
            <template slot-scope="scope">
                <div>
                  <font size="3" color="#000000">{{scope.row.messageContent}}</font><br />
                  <font size="1" color="#565656">{{scope.row.name}} {{scope.row.createTime}}</font><br />
                </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </el-card>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
  /* eslint-disable */
  export default {
    data() {
      return {
        evaluated: false,
        evaluate: 0,
        evaluateCount: 0,
        saveing: false,
        experiment: '',
        pageIndex: 1,
        pageIndex1: 1,
        pageIndex2: 1,
        pageSize: 10,
        totalPage: 0,
        totalPage1: 0,
        totalPage2: 0,
        content: '',
        systemMessage: [],
        userMessage: [],
        otherMessage: []
      }
    },
    activated() {
      this.getMessage(1)
      this.getMessage(2)
      this.read()
    },
    computed: {
      id: {
        get () { return this.$store.state.user.id },
        set (val) { this.$store.commit('user/updateId', val) }
      },
      account: {
        get () { return this.$store.state.user.account },
        set (val) { this.$store.commit('user/updateAccount', val) }
      },
      avatar: {
        get () { return this.$store.state.user.avatar },
        set (val) { this.$store.commit('user/updateAvatar', val) }
      },
      message: {
        get () { return this.$store.state.user.message },
        set (val) { this.$store.commit('user/message', val) }
      }
    },
    methods: {
      read(){
        this.$http({
          url: this.$http.adornUrl('/commonMessage/read'),
          method: 'get'
        }).then(({data}) => {
          if (data.success) {
            this.$store.state.user.message = ''
          }
        })
      },
      // 进入话题
      communityInfo(id){
        console.log('进入话题', id)
        this.$router.push({ name: 'community-info',
                                params: { parentId: id, exper: this.experiment }
                             })
      },
      getCommunity(id){
        console.log('查询实验的详情', id)
        this.experiment = id
        this.initPage()
        this.getContentByExper(id)
        this.getEvaluateResult()
      },
      getMessage(type){
        if(type == 1) {
          this.pageIndex = this.pageIndex1
        } else {
          this.pageIndex = this.pageIndex2
        }
        this.$http({
          url: this.$http.adornUrl('/commonMessage/page'),
          method: 'post',
          data: this.$http.adornData({
            'current': this.pageIndex,
            'page': this.pageSize,
            'typeId': '',
            'messageType': type,
            'read': ''
          })
        }).then(({data}) => {
          if (data.success) {
            if (type == 1) {
              this.systemMessage = data.data.records
              this.totalPage1 = data.data.total
            } else if (type == 2) {
              this.userMessage = data.data.records
              this.totalPage2 = data.data.total
            }
          }
        })
      },
      initPage(){
        this.pageIndex = 1
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getMessage(1)
        this.getMessage(2)
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getMessage(1)
        this.getMessage(2)
      },
      // 当前页
      currentChangeHandle1 (val) {
        this.pageIndex1 = val
        this.getMessage(1)
      },
      // 当前页
      currentChangeHandle2 (val) {
        this.pageIndex2 = val
        this.getMessage(2)
      }
    }
  }
</script>

<style>
</style>
